<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin-top: 300px;
        text-align: center;
        line-height: 100px;
    }
</style>
<body>
    <!-- <div class="container">
        <h3>1</h3>
        <h4></h4>
    </div> -->
    <a href="#article-md-1" id="blog-post1">1</a>
    <a href="#article-md-2" id="blog-post2">2</a>
    <a href="#article-md-3" id="blog-post3">3</a>
    <div class="container" id="article-md-1">
        你好!
    </div>
    <script>
        // const baseURL = "https://zsstudying.cn";
        // const h3_elem = document.querySelector("h3");
        // const h4_elem = document.querySelector("h4");
        // baseURL = "https://developer.mozilla.org#article-md-1"
        // const new_URL = new URL(baseURL);
        // console.log(new_URL);
        // h3_elem.innerHTML = new_URL;
        // h4_elem.innerHTML = new_URL.hash;
        const arr = [];
        const aWithIds = document.querySelectorAll("a");
        const links = document.querySelectorAll('a[href^="#"]');
        // console.log(aWithIds);
        // const url = new URL();
        // console.log(aWithIds);
        console.log(links);
        for (const link of links) {
            console.log(link.href);
            const url = new URL(link.href);
            console.log(url);
            const dom = document.querySelector(url.hash)
            if(dom){
                arr.push(dom);
            }
            // arr.push(url.hash);
        }
        console.log(arr);
    </script>
</body>
</html>